<template>
  <a-drawer
    :title="title"
    :width="drawerWidth"
    placement="right"
    :closable="false"
    :visible="visible"
    @close="onClose"
  >
    <div class="contetnBox">
      <a-table
        :columns="columns"
        :data-source="tableData"
        :loading="loading"
        :pagination="false"
        @change="handleTableChange"
        :rowKey="(record, index) => record.id"
      >
      </a-table>
    </div>
  </a-drawer>
</template>

<script>
import api from "@/api/apiServer";
import { tableMinxins } from "@/unit/mixins/tableMinxins.js";
import { procedureColumns } from "./tableConfig.js";
export default {
  mixins: [tableMinxins],
  data() {
    return {
      columns: procedureColumns,
      visible: false,
      drawerWidth: 720,
      title: "工序",
    };
  },
 mounted() {},
  methods: {
    async getProductGet(id) {
      const res = await api.ProductGet({ id });
      this.tableData = res.data.bomWorkStageList;
    },
    showDrawer(id) {
      this.getProductGet(id);
      this.visible = true;
    },
    onClose() {
      this.visible = false;
    },
  },
};
</script>

<style lang="less" scoped>
.card-header {
  margin: 20px 0;
}
.card-content {
  button {
    margin-right: 13px;
  }
}

.card-content {
  button {
    margin-right: 13px;
  }
  .contetnBox {
    min-height: 809px;
    border: 1px solid #ebedf0;
    border-radius: 2px;
    padding: 20px 0;
    .headerBox {
      padding: 0 20px;
    }
  }
}
</style>
